{% extends "global/Page.html" %} 
{% load otree %} 
{% block title %} 
  Contribute
{% endblock %} 
{% block content %}

<link rel="stylesheet" href="{% static 'css/element.css' %}">
<script src="{% static 'js/vue.js' %}"></script>
<script  src="{% static 'js/element.js' %}"></script>

<p>亲爱的参与者：</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;这是一个团队挣钱游戏，您将和您所有的团队成员一起进行游戏。游戏的轮数为系统随机在1—10轮确定，需要提醒您，无论进行几轮，您所在的团队、所有成员均固定不变。</p>

<div id="app">
  <tabs></tabs>
</div>

<template id="tab">
  <div>
    <el-tabs v-model="index">
      <el-tab-pane label="游戏开始" name="first">
         <p>
          &nbsp;&nbsp;&nbsp;&nbsp;在每一轮游戏中，您获得的初始资金为 100元，您的团队中其他成员也均会获得100元。
        </p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;请认真阅读“游戏介绍”、“游戏内容”和“游戏例子”，您的收益和您的选择以及团队中其他成员的选择密切相关。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp; <h3>本轮您投入公共池的资金为 </h3></p>（请填入0-100之间的任意整数，包括0和100），做出选择后，请点击<span style="color: red;">NEXT按钮</span>。

        {% formfield player.contribution label=""%} 
        {% next_button %} 
        
        
      </el-tab-pane>
      <el-tab-pane label="游戏内容" name="second">
        <p>
         第一个游戏是<span style="color: red;">团队挣钱游戏</span>，18位参与者将被随机分为三组，
每一组6人作为一个团队一起投资赚钱，游戏开始每位玩家获得相同的资金100元。
每位玩家可以选择将个人私有资金100元中<span style="color: red;">任意金额</span> 进行投资，这意味着在极端情况你可以选择一分钱不投，或者将100元全部投入。
小组内所有成员投入的钱在公共池内经过神奇的运营会变为原来的<span style="color: red;">2.4倍</span>，运营后的钱将在组内<span style="color: red;">6人平均</span>分配。
        </p>
        
        
       
        <p>
          本轮游戏结束，游戏重复进行。注意每轮为一期，资金只能用于本轮，游戏结束后，会按固定比例将游戏资金兑换成现金，发放给您。
        </p>
      </el-tab-pane>
      <el-tab-pane label="游戏例子" name="third">
        <p>假设团队内6名玩家一共投入100元，经过神奇的运营，这些钱会变为240元，请各位玩家注意游戏的回报规则：
团队内每位玩家的收益为240÷6=40元，这意味着在本轮游戏中，无论您是否有投资，无论投资多少，获得的回报完全相同都为40元。</p>
<p><h5>这也意味着您在第一个游戏中的回报既和您的选择有关也和团队其他成员的选择密切相关。</h5>

</p>
<p>为了帮助您做出选择，我们给出一个计算个人收益的简洁公式：</p>

       

        <p><span style="color: red;">您的收益=100-您的投入+（本轮团队内所有玩家的投入）×2.4÷6</span> 
          
        </p>
        
        <p></p>
     
      
       
      </el-tab-pane>
      <el-tab-pane label="游戏介绍" name="fourth">
<p>
          <h3 style="color: red; "> 提示：游戏正式开始，请认真观看视频或文字说明。 </h3>
          亲爱的参与者，
          今天你们将一起来玩两个关于挣钱的游戏。在座的18位参与者将会在两个游戏中扮演不同的角色。
          所有角色均随机分配，在每个游戏的屏幕中均会告知您所扮演的角色。
       <p>
         第一个游戏是 <span style="color: red;">团队挣钱游戏</span>，为了赚取更多真实的现金，您仔细阅读下面的说明是很重要的。
在游戏结束后，游戏中获得的资金将按照固定比例折算成现金发放给您，您将获得单独和匿名的现金奖励。
       <p>
           请您在阅读说明和做选择时慢慢来。您不能通过快速选择来影响游戏的持续时间。另外，记住您获得现金取决于您的选择。
           在开始游戏之前，会给您一些测试题，以帮助您检查是否理解说明。在游戏过程中，任何时候都不能透露您的身份和您的报酬。
           您对研究人员和其他玩家的匿名性是有保证的。如果在阅读过程中有任何问题，请举手，一位助手会过来私下回答您的问题。
           请不要与其他玩家交流，请安静地提问。游戏开始后，不得再问任何问题。
        </p>

        <p>
          
          
        </p>
       
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  alert('提示：马上开始正式游戏，请在填写完后点击Next按钮')
  const tab = Vue.extend({
    template: "#tab",
    data() {
      return {
        index: "first",
      };
    },
  });
  const app = new Vue({
    el: "#app",
    components: {
      tabs: tab,
    },
  });
</script>
{% endblock %}
